<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * {
            box-sizing: border-box
        }

        .tab {
            float: left;
            border: 1px solid #ddd;
            background-color: #f1f1f1;
            width: 30%;
            height: 300px;
        }

        .tablinks {
            display: block;
            background-color: inherit;
            color: black;
            padding: 22px 16px;
            width: 100%;
            border: none;
            outline: none;
            text-align: left;
            cursor: pointer;
            transition: 0.3s;
            font-size: 17px;
        }

        .tablinks:hover {
            background-color: #ddd;
        }

        .tablinks.active {
            background-color: #ddd;
        }

        .tabcontent {
            float: left;
            padding: 0px 12px;
            border: 1px solid #ddd;
            width: 70%;
            border-left: none;
            height: 300px;
        }
    </style>
</head>
<body>



    <div class="tab">
        <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
        <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
        <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
    </div>

    <div id="London" class="tabcontent">
        <h3>London</h3>
        <p>London is the capital city of England.</p>
    </div>

    <div id="Paris" class="tabcontent">
        <h3>Paris</h3>
        <p>Paris is the capital of France.</p>
    </div>

    <div id="Tokyo" class="tabcontent">
        <h3>Tokyo</h3>
        <p>Tokyo is the capital of Japan.</p>
    </div>



    <hr><hr><hr>



    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">
        
        必知必会
        
        <div class="tab">
            <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
            <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
            <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
        </div>
    
        <div id="London" class="tabcontent">
            <h3>London</h3>
            <p>London is the capital city of England.</p>
        </div>
    
        <div id="Paris" class="tabcontent">
            <h3>Paris</h3>
            <p>Paris is the capital of France.</p>
        </div>
    
        <div id="Tokyo" class="tabcontent">
            <h3>Tokyo</h3>
            <p>Tokyo is the capital of Japan.</p>
        </div>


        .tab {
            float: left;
            border: 1px solid #ddd;
            background-color: #f1f1f1;
            width: 30%;
            height: 300px;
        }

        .tablinks {
            display: block;
            background-color: inherit;
            color: black;
            padding: 22px 16px;
            width: 100%;
            border: none;
            outline: none;
            text-align: left;
            cursor: pointer;
            transition: 0.3s;
            font-size: 17px;
        }

        .tablinks:hover {
            background-color: #ddd;
        }

        .tablinks.active {
            background-color: #ddd;
        }

        .tabcontent {
            float: left;
            padding: 0px 12px;
            border: 1px solid #ddd;
            width: 70%;
            border-left: none;
            height: 300px;
        }
        
        关键代码:

        function openCity(evt, cityName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");   // 循环遍历 把全部的元素隐藏
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");    // 把全部的按钮取消激活
            }
            document.getElementById(cityName).style.display = "block";
            evt.currentTarget.className += " active";         // 把当前点击的按钮设置为激活状态
        }
    
        document.getElementById("defaultOpen").click();


    </xmp>

</body>
<script>

    
    function openCity(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");   // 循环遍历 把全部的元素隐藏
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");    // 把全部的按钮取消激活
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";         // 把当前点击的按钮设置为激活状态
    }

    document.getElementById("defaultOpen").click();


</script>

</html>